<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单列表</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="/css/app.css?v9"/>
    <script type="text/javascript" src="/js/jquery.js"></script>
    <script type="text/javascript" src="/js/jquery.cookie.js"></script>
    <script type="text/javascript" src="/js/json2.js"></script>
    <script type="text/javascript" src="/js/common.js?v4"></script>
    <!--<script type="text/javascript" src="/js/SPA.js?v12"></script>-->
    <!--<script type="text/javascript" src="/js/Cart.js?v6"></script>-->
</head>
<body class="wx">
<div class="page-wrapper">

    <div class="header">
        <div class="title">订单列表</div>
    </div>

    <div class="order-list-body">
        <div id="ongoing-orders-list" class="ongoing-orders" style="display: none;">
            <div class="status"><div class="text">进行中</div></div>
            <div class="h-line"><hr></div>
            <div id="repeat-ongoing-item" class="group" style="display: none;">
                <div class="des">
                    <div class="left store">南京大排档</div>
                    <div class="right time">2016-09-08 10:53</div>
                </div>
                <div class="prop">
                    <div class="number">订单编号：<span class="text">22</span></div>
                    <div class="people">就餐人数：<span class="text">5人</span></div>
                    <div class="table">就餐桌号：<span class="text">丐帮</span></div>
                </div>
                <div class="summary">
                    <div class="left total">消费总计:<span class="money unpayed">￥328</span></div>
                    <button class="right btn btn-buy">买单</button>
                </div>
            </div>
        </div>
        <div id="history-orders-list" class="orders-list" style="display: none;">
            <div class="status"><div class="text">已结单</div></div>
            <div class="h-line"><hr></div>
            <div id="repeat-history-item" class="group" style="display: none;">
                <div class="des">
                    <div class="left store">南京大排档</div>
                    <div class="right"><i class="remove icon-remove"></i></div>
                </div>
                <div class="prop">
                    <div class="number">订单编号：<span class="text">22</span></div>
                    <div class="line">
                        <div class="time">下单时间：<span class="text">2016-9-8 13:42:22</span></div>
                        <div class="table">就餐桌号：<span class="text">静女</span></div>
                    </div>
                </div>
                <div class="summary">
                    <div class="left total">消费总计:<span class="money">￥328</span></div>
                    <div class="right">已结单</div>
                </div>
            </div>
        </div>
    </div>

    <script>
        (function(){
            var userId = 'codysnail';
            var page = 0;
            var storeName = '智慧餐饮';

            var $ongoingList = $('#ongoing-orders-list');
            var $historyList = $('#history-orders-list');

            $.get('/api/getorders/user/'+ userId + '/'+page,function (data) {
                if(data){
                    var orders = data.content;
                    console.log(orders);
                    showOrders(orders);
                }
            });


            function showOrders(orders) {
                $(orders).each(function (i,item) {
                    if(item.state == 0){
                        if($ongoingList.is(':hidden')){
                            $ongoingList.show();
                        }
                        showUnpayedItem(item);
                    }else{
                        if($historyList.is(':hidden')){
                            $historyList.show();
                        }
                        showHistoryItem(item);
                    }
                })
            }

            function showUnpayedItem(item) {
                var $item = cloneOngoingItem();
                $item.find('.store').text(storeName);
                var time  = item.createdTimeStr.replace(/\//g,'-');
                $item.find('.time').text(time);
                $item.find('.number .text').text(item.id);
                $item.find('.people .text').text(item.people);
                $item.find('.total .money').text(item.price);
                $ongoingList.append($item);
            }

            function showHistoryItem(item) {
                var $item = cloneHistoryItem();
                $item.find('.store').text(storeName);
                var time  = item.createdTimeStr.replace(/\//g,'-');
                $item.find('.number .text').text(item.id);
                $item.find('.time .text').text(time);
                $item.find('.total .money').text(item.price);
                $item.find('.total .right').text(item.state == 1? '已结单':'已取消');
                $item.find('.remove').click(removeClicked);
                $item.attr('order-id',item.id);
                $historyList.append($item);
            }

            function removeClicked(){
                console.log($(this).parents('.group').attr('order-id'));
                var $group = $(this).parents('.group');
                var orderId = $group.attr('order-id');
                var $floatUI = common.showLoading('删除中...');
                var url = '/api/order/delete/' + orderId;
                $.get(url,'',function (data) {
                    common.dismissLoading($floatUI);
                    if(data && data.status == 'success'){
                        $group.remove();
                    }else{
                        common.toast('删除失败');
                    }
                });

                return false;
            }

            var $repeatHistoryItem = $('#repeat-history-item');
            function cloneHistoryItem() {
                var $item = $repeatHistoryItem.clone();
                $item.show();
                $item.attr('id','');
                return $item;
            }

            var $repeatOngoingItem = $('#repeat-ongoing-item');
            function cloneOngoingItem(){
                var $item = $repeatOngoingItem.clone();
                $item.show();
                $item.attr('id','');
                return $item;
            }
        }());
    </script>
</body>
</html>